<template>
    <div>
        <el-table :data="permissionArr" style="width: 100%" row-key="id" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="权限值" />
            <el-table-column prop="updateTime" label="修改时间" />
            <el-table-column label="操作">
                <template #="{ row, $index }">
                    <el-button type="primary" icon="User" size="small" @click="addPermission(row)"
                        :disabled="row.level == 4">{{
            row.level == 3 ? '添加功能' : '添加菜单' }}</el-button>
                    <el-button type="warning" icon="Edit" size="small" @click="eidtPermission(row)"
                        :disabled="row.level == 1">编辑</el-button>
                    <el-button type="danger" icon="Delete" size="small" @click="deleteUser(row.id)"
                        :disabled="row.level == 1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="DialogVisible" :title="menuData.id ? '更新菜单' : '添加菜单'" width="50%" destroy-on-close>
            <el-form :model="roleParams" :rules="rule" ref="roleRef">
                <el-form-item label="名称">
                    <el-input placeholder="输入名称" v-model="menuData.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input placeholder="输入权限值" v-model="menuData.code"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="DialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRoleClick">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
import { reqAllPermission, reqAddOrUpdate, reqDeleteMenu } from '@/api/acl/menu'
import { ElMessage } from 'element-plus';
const DialogVisible = ref(false)
const permissionArr = ref([])
const menuData = reactive({
    code: '',
    level: 0,
    name: '',
    pid: 0
})

onMounted(() => {
    getHasPermission()
})

const getHasPermission = async () => {
    const res = await reqAllPermission()
    if (res.code == 200) {
        permissionArr.value = res.data
    }
}

const addPermission = (row) => {
    Object.assign(menuData, {
        id: 0,
        code: '',
        level: 0,
        name: '',
        pid: 0
    })
    DialogVisible.value = true
    menuData.level = row.level + 1
    menuData.pid = row.id
}

const eidtPermission = (row) => {
    DialogVisible.value = true
    Object.assign(menuData, row)
}

const confirmRoleClick = async () => {
    const res = await reqAddOrUpdate(menuData)
    if (res.code == 200) {
        DialogVisible.value = false
        ElMessage({ type: 'success', message: menuData.id ? '更新成功' : '添加成功' })
        getHasPermission()
    }
}

const deleteUser = async (id) => {
    await reqDeleteMenu(id)
    getHasPermission()
}
</script>

<style scoped></style>